<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>20.循环操作中引用类型使用技巧</title>
</head>

<body>
  <script>
    let lessons = [
      { title: '媒体查询响应式布局', catgegory: 'css' },
      { title: 'Flex弹性盒模型', catgegory: 'css' },
      { title: 'Mysql多表查询随意操作', catgegory: 'mysql' },
      { title: '媒体查询响应式布局', catgegory: 'css' },
    ];
    // fori  最原始的循环
    /*  for (let i = 0; i < lessons.length; i++) {
        lessons[i].title = `后盾人${lessons[i].title}`;
      } */
    // forof 引用类型，修改的时候会会修改原来的数组
    for (const value of lessons) {
      value.title = `后盾人${value.title}`;
    }
    console.table(lessons);

    let arr = [1, 2, 3];
    //对于值类型value 是新开辟的空间，修改value 原本的数组的值不会被改变
    for (let value of arr) {
      value += 10;
    }
    console.table(arr);
    // 对于引用类型，修改value的值会修改数组
    let arr2 = [{ n: 1 }, { n: 2 }];
    for (let value of arr2) {
      value.n += 10
    }
    console.table(arr2);

    // for in 索引遍历
    for(const key in lessons){
      lessons[key].title = `后盾人${lessons[key].title}`;
    }
    // lessons 发生更改
    console.table(lessons);
  </script>
</body>

</html>